import 'package:cook_dinner/widgets/custom_appbar.dart';
import 'package:flutter/material.dart';
import 'package:cook_dinner/config/include.dart';

class StepPage extends StatefulWidget {
  const StepPage({Key? key}) : super(key: key);

  @override
  State<StepPage> createState() => _StepPageState();
}

class _StepPageState extends State<StepPage> {
  final PageController _controller = PageController(
    initialPage: 0,
    viewportFraction: 0.86,
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarCustom('步骤模式'),
      body: Column(
        children: [
          Expanded(
            child: PageView.builder(
              controller: _controller,
              itemCount: 5,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: EdgeInsets.only(top: 47.rpx, right: 20.rpx),
                  child: Container(
                    width: double.infinity,
                    margin: EdgeInsets.only(left: index == 0 ? 20.rpx : 0),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16.rpx),
                      boxShadow: [
                        BoxShadow(
                          offset: Offset(0, 2.rpx), // 垂直偏移4px，水平偏移0
                          blurRadius: 4.rpx, // 模糊半径20px
                          spreadRadius: 0, // 扩展半径0，保持阴影大小不变
                          color: const Color(0xFF000000)
                              .withOpacity(0.06), // 颜色设置为透明度较低的黑色
                        ),
                      ],
                      color: Colors.white,
                    ),
                    padding: EdgeInsets.only(
                        top: 20.rpx,
                        bottom: 24.rpx,
                        left: 22.rpx,
                        right: 22.rpx),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.rpx),
                          child: Image.asset(
                            'assets/images/meet.png',
                            height: 280.rpx,
                          ),
                        ),
                        SizedBox(height: 32.rpx),
                        Text(
                          '使用',
                          style: TextStyle(
                              color: const Color(0xff333333), fontSize: 16.rpx),
                        ),
                        SizedBox(height: 16.rpx),
                        Text(
                          '2汤匙、1勺植物油、枫糖浆120毫升、酪乳。',
                          style: TextStyle(
                              color: const Color(0xff666666), fontSize: 14.rpx),
                        ),
                        SizedBox(height: 30.rpx),
                        Text(
                          '做法',
                          style: TextStyle(
                              color: const Color(0xff333333), fontSize: 16.rpx),
                        ),
                        SizedBox(height: 16.rpx),
                        Text(
                          '将鸡蛋在大碗中搅打至起泡。',
                          style: TextStyle(
                              color: const Color(0xff666666), fontSize: 14.rpx),
                        ),
                        SizedBox(height: 56.rpx),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                Image.asset(
                                  'assets/images/time.png',
                                  width: 22.rpx,
                                  height: 20.rpx,
                                ),
                                Text(
                                  '15min',
                                  style: TextStyle(
                                      color: const Color(0xffFA8303),
                                      fontSize: 14.rpx),
                                ),
                              ],
                            ),
                            Text(
                              '第一步',
                              style: TextStyle(
                                  color: const Color(0xff333333),
                                  fontSize: 14.rpx),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 87.rpx, top: 66.rpx),
            child: InkWell(
              onTap: () => Navigator.pop(context),
              child: Container(
                width: 226.rpx,
                height: 65.3.rpx,
                decoration: BoxDecoration(
                  color: const Color(0xffFCC302),
                  borderRadius: BorderRadius.circular(33.rpx),
                ),
                alignment: Alignment.center,
                child: Text(
                  '退出步骤',
                  style: TextStyle(color: Colors.white, fontSize: 24.rpx),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
